<template>
    <div class='service-manage-update-container-step1'>
        <div class='content'>
            <div class='level-item'>
                <template v-for='(item, index) in treeData'>
                    <div :class='{active: _allChooseFirst.includes(item.id), select: nowChoose[0] && nowChoose[0].id === item.id}' :key='index' @click='getTow(item)'>
                        <p>{{ item.name }}</p>
                        <a-icon v-if='item.children && item.children.length' type="right" />
                    </div>
                </template>
            </div>
            <div class="w20"></div>
            <div class='level-item'>
                <template v-for='(item, index) in levelTow'>
                    <div :class='{active: _allChooseSec.includes(item.id), select: nowChoose[1] && nowChoose[1].id === item.id}' :key='index' @click='getThree(item)'>
                        <p>{{ item.name }}</p>
                        <a-icon v-if='item.children && item.children.length' type="right" />
                    </div>
                </template>
            </div>
            <div class="w20"></div>
            <div class='level-item'>
                <template v-for='(item, index) in levelThree'>
                    <div :class='{active: _allChooseLast.includes(item.id), select: nowChoose[2] && nowChoose[2].id === item.id}' :key='index' @click='chooseThree(item)'>
                        <p>{{ item.name }}</p>
                    </div>
                </template>
            </div>
        </div>
        <div class='check'>
            <div>
                <p>您当前选择的是：</p>
                <div class='delete-box'>
                    <div v-for='item in allChoose' :key="'parent' + item[2].id">
                        <p v-for='(it, index) in item' :key='it.id'>
                            <span>{{ it.name }}</span>
                            <a-icon v-if='index !== item.length - 1' type="right" />
                        </p>
                        <a-icon class='icon-close' @click='deleteItem(item[2].id)' type="close-circle" />
                    </div>
                </div>
            </div>
            <a-button @click='changeStep'>下一步，填写服务信息</a-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Step1',
    model: {
        prop: 'updateForm',
        event: 'change'
    },
    props: {
        updateForm: {
            type: Object,
            required: true
        },
        treeData: {
            type: Array,
            required: true
        }
    },
    data () {
        return {
            // 二级内容
            levelTow: [],
            // 三级内容
            levelThree: [],
            // 当前选择的（用于选中三级后获取一二级）
            nowChoose: [],
            // 所有选中的完整标签
            allChoose: [],
            flag: true
        }
    },
    computed: {
        _allChooseFirst () {
            return this.allChoose.map(item => item[0].id)
        },
        _allChooseSec () {
            return this.allChoose.map(item => item[1].id)
        },
        _allChooseLast () {
            return this.allChoose.map(item => item[2].id)
        }
    },
    watch: {
        updateForm: {
            deep: true,
            immediate: true,
            handler (val) {
                this.allChoose = val.type || []
                if (this.$route.query.id) {
                    if (this.flag) {
                        if (val.type.length) {
                            val.type[0].forEach((item, index) => {
                                if (index === 0) {
                                    this.getTow(item)
                                } else if (index === 1) {
                                    this.getThree(item)
                                } else {
                                    this.nowChoose.push(item)
                                }
                            })
                        }
                        this.flag = false
                    }
                }
            }
        }
    },
    methods: {
        getTow (item) {
            this.nowChoose = [item]
            this.levelTow = item.children
            this.levelThree = []
        },
        getThree (item) {
            if (this.nowChoose.length === 1) {
                this.nowChoose.push(item)
            } else {
                this.nowChoose[1] = item
            }
            this.levelThree = item.children
        },
        chooseThree (item) {
            if (this.nowChoose.length === 2) {
                this.nowChoose.push(item)
            } else {
                this.nowChoose.splice(2, 1, item)
            }
            if (!this._allChooseLast.includes(item.id)) {
                if (this.allChoose.length < 10) {
                    this.allChoose.push([...this.nowChoose])
                } else {
                    this.$message.error('最多只能选择10条服务报价类目')
                }
            } else {
                this.deleteItem(item.id)
                this.nowChoose.length = 2
            }
        },
        deleteItem (id) {
            this.allChoose = this.allChoose.filter(it => it[2].id !== id)
        },
        changeStep () {
            if (this.allChoose.length) {
                this.$emit('change', {
                    ...this.updateForm,
                    type: this.allChoose,
                    step: 2
                })
            } else {
                this.$message.error('请选择服务报价类目')
            }
        }
    }
}
</script>

<style scoped lang='less'>
.service-manage-update-container-step1 {
    .content {
        background: rgba(193, 235, 212, 0.2);
        border: 1px solid #64E99F;
        padding: 20px 32px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .level-item {
            flex: 1;
            min-width: 295px;
            height: 434px;
            overflow-y: auto;
            background-color: #fff;
            border: 1px solid #64E99F;
            padding: 10px;
            box-sizing: border-box;
            div {
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px 0 40px;
                cursor: pointer;
                border: 1px solid transparent;
                &.active {
                    background: #DDF7E9;
                    p {
                        color: #666666;
                    }
                }
                &.select {
                    border: 1px dashed #666;
                    box-sizing: border-box;
                }
                p {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 22px;
                    color: #333333;
                }
                .anticon {
                    font-size: 14px;
                    color: #333;
                }
            }
        }
        .img {
            width: 4%;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                display: block;
                width: 20px;
                height: 23px;
            }
        }
    }
    .check {
        background: #fff;
        min-height: 205px;
        & > div {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            border: 1px solid #64E99F;
            border-top: none;
            padding: 10px 32px 0;
            p {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                color: #333333;
                span {
                    color: @primary-color;
                }
                .anticon {
                    font-size: 12px;
                    color: #333;
                    margin-right: 4px;
                }
            }
            & > p  {
                line-height: 30px;
                width: 116px;
            }
            .delete-box {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                width: calc(100% - 116px);
                min-height: 40px;
                div {
                    border: 1px solid #666;
                    padding: 4px 10px 4px 10px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 10px;
                    position: relative;
                    margin-bottom: 10px;
                    .icon-close {
                        position: absolute;
                        right: -7px;
                        top: -7px;
                        background: #fff;
                    }
                }
            }
        }
        button {
            width: 180px;
            height: 36px;
            background: @primary-color;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            display: block;
            margin: 59px auto 0;
        }
    }
  .w20{
    width: 20px;
  }
}
</style>
